<template>
    <div class="guidanceAndAssess">
        <div class="guidance">
            <div class="guidance-title">
                用户咨询
            </div>
            <div class="allGuidances">
                <div v-if="guidancesAll.length !== 0" v-for="(item,index) in guidancesAll" :key="index" class="guidancesDetail">
                {{ ` 与${item.userName}的对话`  }}
                <el-button type="primary" plain class="button" @click="handleGuidanceDetail(item)">详情</el-button>
                </div>
                <div v-else>
                    目前暂无咨询
                </div>
            </div>
        </div>
        <div class="guidance">
            <div class="guidance-title">
                所有商品评价
            </div>
            <div class="allGuidances">
                <div v-if="assessAll.length !== 0" v-for="(item,index) in assessAll" :key="index" class="guidancesDetail">
                {{ ` ${item.userName}对${item.flowerName}的评价`  }}
                <el-button type="primary" plain class="button" @click="handleAssessDetail(item)">详情</el-button>
                </div>
                <div v-else>
                    目前暂无商品评价
                </div>
            </div>
        </div>
    </div>
    <consultation-dialog 
    v-if="consultationDialogVisible"
    :dialogVisible="consultationDialogVisible"
    :userName = "userName"
    @dialogShow="dialogShow"
    />
    <assess-dialog 
    v-if="assessDialogVisible"
    :dialogVisible="assessDialogVisible"
    :assessInfo="assessInfo"
    @assessDialogShow="assessDialogShow"
    @completed="assessCompleted"
    />
</template>

<script setup>
import {Allguidances,Allassess} from '@/api/guidances'
import { onMounted ,ref} from 'vue';
import consultationDialog from './consultationDialog.vue'
import assessDialog from './assessDialog.vue'
// 所有的咨询
let guidancesAll = ref([])
// 所有的评价
let assessAll = ref([])
// 控制咨询弹框的展示与隐藏
let consultationDialogVisible = ref(false)
// 控制商品评价的展示与隐藏
let assessDialogVisible = ref(false)
// 进行对话的用户名
let userName = ref()
// 点击的评价的信息
let assessInfo = ref()
// 用户咨询弹框关闭时
const dialogShow =(isShow) =>{
    consultationDialogVisible.value = isShow
}
// 用户咨询点击详情时
const handleGuidanceDetail = (item) =>{
    userName.value = item.userName
    consultationDialogVisible.value = true
}
// 用户评价弹框关闭时
const assessDialogShow = (isShow) =>{
    assessDialogVisible.value = isShow
}
// 商品评价点击详情时
const handleAssessDetail = (item) =>{
    assessInfo.value = JSON.parse(JSON.stringify(item))
    assessDialogVisible.value = true
}
// 商家对评论回复成功的回调
const assessCompleted = async() =>{
    // 获取所有的评论
    assessAll.value = await Allassess()
}
onMounted(async()=>{
    // 获取所有的咨询
    guidancesAll.value = await Allguidances()
    // 获取所有的评论
    assessAll.value = await Allassess()
})
</script>

<style lang="scss" scoped>
.guidanceAndAssess{
    .guidance{
        min-width: 1000px;
        max-width: 100%;
        min-height: 200px;
        max-height: 400px;
        display: flex;
        // background-color: #F5F5F5;
        flex-direction: column;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        margin-bottom: 20px;
        .guidance-title{
            width: 100%;
            height: 30px;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            padding-bottom: 5px;
        }
        .allGuidances{
            display: flex;
            flex-direction: column;
            .guidancesDetail{
                min-width: 1000px;
                max-width: 100%;
                height: 100px;
                border-radius: 10px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                margin-bottom: 20px;
                padding: 10px;
                position: relative;
                .button{
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                }
            }
        }
}
}

</style>